<template>


	<view class="item">
		<view class="top">

			<view class="top_one">
				<view class="icons_zuo">

				</view>
				<span v-for="(item,index) in list" :key="index" @click="lists(index)" :class="item" style="text-align: center;
			margin-left: 3vw;
			line-height: 10vw;
			width: 10vw;
			height: 10vw;color: aliceblue;"></span>
			</view>
			<view class="top_two">
				<view class="imgs">
					<view class="avatar">

					</view>
				</view>
				<view class="texts">
					<p @click="names">{{users.nickname}}</p>
				</view>
			</view>
			<view class="top_three">
				<view class="monys" @click="pays">
					<view class="monys_qb">
						￥{{users.money}}
					</view>
					<view class="monys_icon">
						<span><span class="icon-cash"></span><span
								style="margin-left: 10rpx; font-size: 26rpx;">钱包</span></span>
					</view>
				</view>
				<view class="monys">
					<view class="monys_qb">
						0
					</view>
					<view class="monys_icon">
						<span class="icon-divide"></span><span style="margin-left: 10rpx; font-size: 26rpx;">积分</span>
					</view>
				</view>
				<view class="monys">
					<view class="monys_qb">
						{{collectionLength}}
					</view>
					<view class="monys_icon" @click="collect">
						<span class="icon-collect_fill"></span><span
							style="margin-left: 10rpx; font-size: 26rpx;">收藏</span>
					</view>
				</view>
			</view>
		</view>
		<view class="my_trade">
			<view class="my">
				我的交易
			</view>
		</view>
		<view class="paiban">
			<view class="monys" @click="goumai">
				<dl>
					<dt>
						<span class="icon-buy"></span>
					</dt>
					<dd>
						我的购买
					</dd>
				</dl>
			</view>
			<view class="monys" @click="tips">

				<dl>
					<dt>
						<span class="icon-recharge"></span>
					</dt>
					<dd>
						充值记录
					</dd>
				</dl>
			</view>

			<view class="monys" @click="historys">
				<dl>
					<dt>
						<span class="icon-log"></span>
					</dt>
					<dd>
						浏览历史
					</dd>
				</dl>
			</view>

			<view class="monys">

			</view>
		</view>
		<swiperVue style="width: 95%;height: 20vw;"></swiperVue>
		<view class="my_trades">
			<view class="my">
				我的服务
			</view>
		</view>
		<view class="paiban">
			<view class="monys">
				<dl @click="steam()">
					<dt>
						<view class="steam">

						</view>
					</dt>
					<dd style="white-space: nowrap;">
						steam链接
					</dd>
				</dl>
			</view>
			<view class="monys" @click="bangzhu">
				<dl>
					<dt>
						<span class="icon-help"></span>
					</dt>
					<dd>
						帮助中心
					</dd>
				</dl>
			</view>


			<view class="monys" @click="tips">
				<!-- 	<dl>
					<dt>
						<span class="icon-gen"></span>
					</dt>
					<dd>
						问题反馈
					</dd>
				</dl> -->
			</view>
			<view class="monys" @click="tips">
				<!-- <dl>
					<dt>
						<span class="icon-prize"></span>
					</dt>
					<dd>
						积分抽奖
					</dd>
				</dl> -->
			</view>
			<dingwei></dingwei>
		</view>

	</view>


</template>

<script>
	import swiperVue from '../../components/index/swiper.vue';
	import dingwei from '../../components/index/kefu.vue';
	export default {

		data() {
			return {

				moner: 0,
				users: [],
				list: [
					"icon-setup"
				],
				monys: ["1", "2", "3"],
				serve: ["1", "2", "3", "4"],
				data: [

				],
				list1: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				//背景色
				bgColor: "#fff",
				//文本色
				textColor: "#2A2D2E",
				//收藏列表长度
				collectionLength: 0
			}
		},
		components: {

			swiperVue,
			dingwei
		},
		onShow() {
			let token = uni.getStorageSync('token')
			let user = uni.getStorageSync('user')
			if (!token) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
			// console.log(this.users)
			this.user()
			this.swiper()
			uni.request({
				method: 'POST',
				url: "/api/jewerly/index",
				success(res) {
					// console.log(res)
				}
			})
			this.getSetting()
			this.getColl()
		},
		methods: {
			//收藏列表
			getColl() {
				uni.request({
					url: "/api/jewerly/collect_list",
					method: 'POST',
					header: {
						token: uni.getStorageSync('token')
					}
				}).then(res => {
					this.collectionLength = res.data.data.data.length;
				})
			},
			getSetting() {
				uni.request({
					url: "/api/index/getSetting",
					method: "POST"
				}).then(res => {
					document.documentElement.style.setProperty('--bg-color', res.data.data.theme_color);
					document.documentElement.style.setProperty('--text-color', res.data.data.font_color);
				})
			},
			qqs() {
				location.href = "http://wpa.qq.com/msgrd?v=3&uin=1450612626&site=qq&menu=yes"
			},

			tips() {
				uni.navigateTo({
					url: "/pages/recharge_history/recharge_history"
				})
				// uni.showToast({
				// 	title: '功能待开发，敬请期待',
				// 	icon: 'none', //将值设置为 success 或者 ''
				// 	duration: 2000 //持续时间为 2秒
				// })
			},
			bangzhu() {
				uni.navigateTo({
					url: "/pages/Information/Information"
				})
			},
			goumai() {
				uni.navigateTo({
					url: "/pages/My/purchase/purchase"
				})
			},
			historys() {
				uni.navigateTo({
					url: "/pages/history/history"
				})
			},
			swiper() {
				uni.request({
					url: "/api/index/banner",
					method: "POST",
					header: {
						'content-Type': 'application/json',
						token: uni.getStorageSync('token')
					}
				}).then(res => {
					// console.log(res)
				})
			},
			user() {
				uni.request({
					url: "/api/system/userinfo",
					method: "POST",
					header: {
						'content-Type': 'application/json',
						token: uni.getStorageSync('token')
					}
				}).then(res => {
					if (res.data.code == 409 || res.data.code == 403 || res.data.code == 303) {
						uni.removeStorageSync("user")
						uni.removeStorageSync("token")
						uni.removeStorageSync("datausers")
						uni.showToast({
							icon: "none",
							title: "请重新登录",
							duration: 1000
						})
						setTimeout(() => {
							uni.navigateTo({
								url: "/pages/login/login"
							})
						}, 1000)
						return
					}
					this.users = res.data.data
					uni.setStorageSync("datausers", this.users)
				})
			},
			names() {
				uni.navigateTo({
					url: "/pages/My/name/name"
				})
			},
			history() {
				uni.navigateTo({
					url: "/pages/My/history/history"
				})
			},
			lists(index) {
				if (index == 0) {
					uni.navigateTo({
						url: "/pages/My/set/set"
					})
				}
				if (index == 1) {
					uni.navigateTo({
						url: "/pages/message/message"
					})
				}
				if (index == 2) {
					uni.navigateTo({
						url: "/pages/My/set/set"
					})
				}
			},
			collect() {
				uni.navigateTo({
					url: "/pages/collection/collection"
				})
			},
			pays() {
				uni.navigateTo({
					url: "/pages/recharge/recharge"
				})
			},
			steam() {
				console.log("111")
				uni.navigateTo({
					url: "/pages/steam/steam",
				});
			}
		}
	}
</script>
<style type="text/css">
	@import url("../../static/icon2/style.css");
</style>
<style lang="scss">
	.paiban {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;

		.monys {
			width: 23%;
			margin-bottom: 10px;
			text-align: center;

			padding: 10px;
			box-sizing: border-box;
		}
	}

	:root {
		--bg-color: ;
		--text-color: ;
	}

	.icon-csgo {
		font-family: "icomoon";
	}

	.monys_qb {
		width: 100%;
		height: 50%;
		line-height: 13vw;
	}

	.monys_icon {
		width: 100%;
		height: 50%;
		line-height: 12vw;
	}

	.icon-csgo::before {
		content: "\e900";
	}

	.item {
		width: 100vw;
		height: 90vh;
		background-color: var(--bg-color);
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow: scroll;
	}

	.top {
		width: 100%;
		height: 55vw;
		background-color: #075eb0;
	}

	.top_one {
		width: 100%;
		height: 25%;
		/* background-color: red; */
		display: flex;

		.icons_zuo {
			width: 85%;
			height: 100%;
		}

		.icons_you {
			text-align: center;
			margin-left: 3vw;
			line-height: 10vw;
			width: 10vw;
			height: 10vw;
		}
	}

	.top_two {
		width: 100%;
		height: 40%;
		display: flex;

		.imgs {
			width: 15vw;
			height: 15vw;
			background-color: black;
			border-radius: 50%;
			margin-left: 3vw;
			overflow: hidden;

			.avatar {
				width: 100%;
				height: 100%;
				background-image: url("../../static/icon/avatar.jpg");
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;

			}

		}

		.texts {
			flex: 1;
			line-height: 15vw;
			font-size: 4vw;
			color: aliceblue;
			margin-left: 3vw;
		}
	}

	.top_three {
		width: 100%;
		height: 35%;
		background-color: #064e92;
		display: flex;

		.monys {
			flex: 1;
			text-align: center;
			line-height: 10vw;
			/* line-height: 20vw; */
			color: #e2e9f1;
			font-size: 4vw;
		}
	}

	.monys dl {
		width: 100%;
		height: 100%;
	}

	.monys dl dt {
		width: 100%;
		height: 50%;
		/* line-height: 10vw; */
		font-size: 8vw;
		// color: var(--text-color);
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 4vw;

		.steam {
			width: 40%;
			height: 70%;
			color: var(--text-color);
			background-image: url("../../static/icon/steam.svg");
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
		}
	}

	.monys dl dd {
		width: 100%;
		height: 50%;
		line-height: 5.5vw;
		font-size: 3vw;
		color: var(--text-color);

	}

	.swipers {
		width: 95%;

		margin: 0 auto;

	}

	.my_trade {
		width: 100%;
		height: 15vw;
		/* overflow: hidden; */
	}

	.my_trades {
		width: 100%;
		height: 15vw;
	}

	.my {
		width: 90%;
		height: 14vw;
		border-bottom: 1px solid #ccc;
		margin: 0 auto;
		font-weight: bold;
		font-size: 4vw;
		line-height: 14vw;
		margin-top: 1vw;
		color: white;
	}

	.trades {
		width: 100%;
		height: 27vw;
		display: flex;

		.monys {
			width: 90px;
			height: 90px;
			text-align: center;
			line-height: 27vw;
			color: black;
			margin-top: 2vw;
		}
	}
</style>